
import liebiaoblue  from '../../../../imgs/liebiaoblue.png'
import liebiao  from '../../../../imgs/liebiao.png'
import datublue  from '../../../../imgs/datublue.png'
import datu  from '../../../../imgs/datu.png'
import arrowdown1 from '../../../../imgs/arrowdown1.png'
import arrowdown from '../../../../imgs/arrowdown.png'
import tri1 from '../../../../imgs/tri1.png'
import tri2 from '../../../../imgs/tri2.png'
import tri3 from '../../../../imgs/tri3.png'

import CommonUtils from '../../common/utils/CommonUtils'
import  SelecteCity from '../../common/comps/SelecteCity'



export default class SortComps extends React.Component{

    constructor(){
        super()
        this.state={
            choosed:0,

            citylist:null,
            show_citylist:false,
            city:'全国',
            dsort:true,   //降序排列
            
            minPrice:'',
            maxPrice:''
        }
    }

    componentDidMount() {

    }


    render(){

        const {isInSupp,total,setCity}=this.props

        return(
            <div
                className={isInSupp? 'search-page-sort-comp-insupp':'search-page-sort-comp'}>
                {this.sortByDefault()}
                <div className={'search-page-sort-item-line'}/>
                {this.sortByAmount()}
                <div className={'search-page-sort-item-line'}/>
                {/*{this.sortByComment()}*/}
                {global.hasLogin&&this.sortByPrice()}
                {global.hasLogin&&<div className={'search-page-sort-item-line'}/>}
                {global.hasLogin&&this.inputPrice()}
                <div className={'search-page-sort-item-line'}/>
                {
                 this.renderCityList(isInSupp,setCity)
                }

                <div className={'search-page-sort-item-line'}/>
                {/*大图，列表*/}
                {this.setlistStyle()}
                {
                    !isInSupp&&(
                        <div className={'search-page-sort-item-line'}/>
                    )
                }
                {
                    !isInSupp&&(
                        <div className={'search-page-sort-item-goods'}>
                            <p>共<span className={'search-page-sort-goods-num'}>{total}</span>个商品</p>
                        </div>
                    )
                }

            </div>
        )
    }


    //
    renderCityList(isInSupp,setCity){
        if(isInSupp){
           return(
               <div style={{flex:1}}/>
           )
        }
        if(!global.hasLogin){
            return(
                <div style={{flex:1}}/>
            )
        }
        else{
           return(
               <SelecteCity
                   setCity={setCity}
               />
           )
        }


    }


    setlistStyle(){
        const {lists_style,setStyle,}=this.props
        return(
            <div className={'search-page-sort-item-lists'}>
                <div
                    onClick={()=>setStyle(1)}
                    className={'search-page-sort-item-lists-icons'}>
                    <img src={lists_style==1? datublue:datu} alt=""/>
                    <p className={lists_style==1?'search-page-sort-item-lists-icons-p1': 'search-page-sort-item-lists-icons-p'}>大图</p>
                </div>
                <div
                    onClick={()=>setStyle(2)}
                    className={'search-page-sort-item-lists-icons'}>
                    <img src={lists_style==2?liebiaoblue:liebiao} alt=""/>
                    <p className={lists_style==2?'search-page-sort-item-lists-icons-p1':'search-page-sort-item-lists-icons-p'}>列表</p>
                </div>
            </div>
        )
    }

    //排序,默认
    sortByDefault(){
        const {choosed}=this.state
        return(
            <div
                onClick={()=>{
                    this.setState({
                        choosed:0
                    })
                    this.props.setSortword('')
                }}
                className={choosed==0? 'search-page-sort-default-choosed':'search-page-sort-default'}>
                <p className={choosed==0?'search-page-sort-item-p-choosed':'search-page-sort-item-p'}>默认</p>
            </div>
        )
    }


    //销量
    sortByAmount(){
        const {choosed}=this.state
        if(!global.hasLogin){
            return null
        }
        return(
            <div
                onClick={()=>{
                    this.setState({
                        choosed:1
                    })
                    this.props.setSortword('sale_amount-desc')
                }}
                className={choosed==1? 'search-page-sort-default-choosed':'search-page-sort-normal'}>
                <p className={choosed==1? 'search-page-sort-item-p-choosed':'search-page-sort-item-p'}>销量</p>
                <img className={'search-page-sort-normal-img'} src={choosed==1? arrowdown:arrowdown1} alt=""/>
            </div>
        )
    }


    //好评
    sortByComment(){
        const {choosed}=this.state
        return(
            <div
                onClick={()=>{
                    this.setState({
                        choosed:2
                    })
                    // this.props.setSortword('sale_amount')
                }}
                className={choosed==2? 'search-page-sort-default-choosed':'search-page-sort-normal'}>
                <p className={choosed==2? 'search-page-sort-item-p-choosed':'search-page-sort-item-p'}>好评</p>
                <img className={'search-page-sort-normal-img'} src={choosed==2? arrowdown:arrowdown1} alt=""/>
            </div>
        )
    }


    //价格
    sortByPrice(){
        // if(!global.hasLogin){
        //     return null
        // }
        const {choosed,dsort}=this.state
        const [triImg1,triImg2]=this.getImgSrcArr()
        return(
            <div
                onClick={()=>{
                    if(choosed==3){
                        this.setState({
                            dsort:!dsort
                        })
                        let sortWord=dsort? 'price-asc':'price-desc'
                        this.props.setSortword(sortWord)
                        return
                    }
                    this.setState({
                        choosed:3
                    })
                    let sortWord=dsort? 'price-desc':'price-asc'
                    this.props.setSortword(sortWord)
                }}
                className={choosed==3? 'search-page-sort-default-choosed':'search-page-sort-normal'}>
                <p className={choosed==3? 'search-page-sort-item-p-choosed':'search-page-sort-item-p'}>价格</p>
                <div className={'search-page-sort-tri-list'}>
                    <img
                        className={'search-page-sort-price-tri'} src={triImg1} alt=""/>
                    <img
                        className={'search-page-sort-price-tri-down'} src={triImg2} alt=""/>
                </div>
            </div>
        )
    }

    getImgSrcArr(){
        const {dsort,choosed}=this.state
        const isChoose=choosed==3
        if(isChoose){
            if(dsort){
                return [tri3,tri2]
            }
            return [tri2,tri3]
        }
        return [tri1,tri1]
    }


    //输入价格
    inputPrice(){
        const {minPrice,maxPrice}=this.state
        return(
            <div className={'search-page-sort-item-price'}>
                <div className={'search-page-sort-price-inputs'}>
                    <input
                        type="text"
                        placeholder={'最低价'}
                        onChange={(e)=>{

                            this.setState({
                                minPrice:e.target.value
                            })
                           
                        }}
                    />
                    <p className={'search-page-sort-inputs-l'}>-</p>
                    <input
                        type="text"
                        placeholder={'最高价'}
                        onChange={(e)=>{
                            this.setState({
                                maxPrice:e.target.value
                            })
                        }}
                    />
                    <div
                        onClick={()=>{
                           let {minPrice,maxPrice}=this.state
                            minPrice=minPrice==''?minPrice:minPrice-0
                            maxPrice=maxPrice==''?maxPrice:maxPrice-0

                           this.props.setPrice(minPrice,maxPrice)
                        }}
                        className={minPrice||maxPrice? 'search-page-sort-price-confrim1': 'search-page-sort-price-confrim'}>
                        <p>确定</p>
                    </div>
                </div>
            </div>
        )
    }



}



